<template>
	<m-layout className="wallet-box" :title="Coin[coinid]">
		<m-block spa="0 0 20 " className="top-card">
			<view class="balance-box">
				<view class="h1 flex-between">
					<view class="left flex">
						<m-icon type="icon-jifen-F" wh="34" spa="0 15 0 0" color="var(--theme)"> </m-icon>
						<text>剩余可用</text>
					</view>
				</view>
				<!-- :unit="nowBalance['coinname']" -->
				<m-number gap="20 0 10" :value="nowBalance['balance']" size="54 30" weight="600"
					color="#333"></m-number>
				<!-- <view class="flex-between">
					<view class="h2 flex">
						<text>冻结：{{nowBalance['lockbalance']}}</text>
						<m-tag spa=" 0 0 0 15"
							@click="Jump('/pagesA/wallet/loockRecode/loockRecode?coinid='+coinid)">查看</m-tag>
					</view>
				</view> -->
				<view class="flex-between" v-if="coinid">
					<view class="h2 flex">
						<text v-if="coinid == 1">冻结：{{nowBalance['lockbalance']}}</text>
						<text v-if="coinid == 2">待释放：{{nowBalance['lockbalance']}}</text>
					</view>
				</view>
			</view>
			<view class="btn-box flex-between">
				<!-- <view @click="Jump(`/pagesA/wallet/recharge/jfRecharge`)" v-if="coinid == 2 && isSalesman">
					<m-icon type="icon-qianbao1" wh="35" color="var(--theme)" spa="0 10 0 0"></m-icon>
					<text>充值</text>
				</view> -->
				<!-- <view v-if="newConfig.isout" 
					@click="Jump(`/pagesA/wallet/withdraw/withdraw?coinid=${coinid}`)">
					<m-icon type="icon-send" wh="35" color="var(--theme)" spa="0 10 0 0"></m-icon>
					<text>提取</text>
				</view>
				<view v-if="newConfig.istransfer" @click="Jump(`/pagesA/wallet/transfer/transfer?coinid=${coinid}`)">
					<m-icon type="icon-receive" wh="35" color="var(--theme)" spa="0 10 0 0"></m-icon>
					<text>划转</text>
				</view> -->
				<!-- <view v-if="[2,6].indexOf(Number(coinid)) != -1"
					@click="Jump(`/pages/wallet/conversion/conversion?coinid=${coinid}`)">
					<m-icon type="icon-jifenduihuan" wh="35" color="var(--theme)" spa="0 10 0 0"></m-icon>
					<text>兑换</text>
				</view> -->
			</view>
		</m-block>
		<m-sticky :offsetTop="44">
			<m-block className="tab-box flex-between" gap="30 30 30" radius="20 20 0 0">
				<view class="flex">
					<picker @change="bindTradeChange" range-key="name" :range="payType1">
						<view class="flex">
							<view>{{TradeType[tradeType]}}</view>
							<m-icon wh="30" color="#999" type="icon-xiala-xia"></m-icon>
						</view>
					</picker>
				</view>
				<!-- 	<picker mode="date" fields="month" @change="bindDateChange">
					<view class="flex">
						<view>{{dateStr}}</view>
						<m-icon  wh="30" color="#C0C0C0" type="icon-xiala-xia"></m-icon>
					</view>
				</picker> -->
			</m-block>
		</m-sticky>
		<m-block class="ul" gap="0 30" radius="0 0 20 20">
			<template v-for="(item,index) in listArr">
				<view class="li" :key="index">
					<view class="h1 flex-between">
						<view class="left flex">
							<m-icon type="walletRecodeIcon" spa="0 15 0 0" wh="40"></m-icon>
							<view class="">
									<m-text bold>{{TradeType[item.tradetype]}} ：</m-text>
									<m-text bold :color="item.payout>0?'var(--error)':'var(--success)'">{{item.payout>0?'-':'+'}}{{item.payout || item.income}}</m-text>
							</view>
						
						</view>
						<text class="right">{{item.createtime | times([5,11])}}</text>
					</view>
					<view class="h2">
						<text>摘要：{{item.tradedescription || '--'}}</text>
					</view>
				</view>
			</template>
		</m-block>
		<m-loading :pageIndex="pageIndex" :pageCount="pageCount" :loading="isLoading" />
	</m-layout>
</template>

<script>
	import { mapState } from 'vuex'
	import { UserBalanceRecord } from '@/api/Users.js'
	import { balance } from '@/api/Users.js'
	export default {
		data() {
			return {
				tradeType: 0, // 交易类型
				scrollTop: 0,
				coinid: '',

				listArr: [],
				pageIndex: 1,
				pageCount: 1,
				isLoading: true,
			};
		},
		onPageScroll({ scrollTop }) {
			this.scrollTop = scrollTop;
		},
		computed: {
			...mapState({
				enum: state => state.general.enum,
				userbalance: state => state.user.userbalance,
				userinfo: state => state.user.userinfo,
				coinConfig: state => state.general.coinConfig,
			}),
			isSalesman() {
				return this.userinfo.storeManager > 0 || this.userinfo.dls > 0 || this.userinfo.uLevel > 0
			},
			newConfig() {
				return this.coinConfig[this.coinid]
			},
			Coin() {
				return this.enum['Coin']
			},
			nowBalance() {
				return this.userbalance[this.coinid]
			},
			TradeType() {
				return this.enum['TradeType']
			},
			payType1() {
				let typeArr = [];
				for (let item in this.TradeType) {
					typeArr.push({
						id: item,
						name: this.TradeType[item],
					}, )
					// if (this.typeList.indexOf(Number(item)) != -1) {
					// 	typeArr.push({
					// 		id: item,
					// 		name: this.TradeType[item],
					// 	}, )
					// }
				}
				return typeArr || []
			},
		},
		onLoad({ coinid }) {
			this.coinid = coinid || 1;
			this.init();
		},
		methods: {
			// 初始化
			init() {
				balance();
				

				let date = this.formatDate(new Date(), 'yyyy-MM-dd').split('-');
				this.searchYear = date[0];
				this.searchMonth = date[1];
				this.dateStr = this.searchYear + "年" + this.searchMonth + "月";
				this.reset();

			},
			// 日期选择监听
			bindDateChange(e) {
				let date = e.detail.value.split('-');
				this.searchYear = date[0];
				this.searchMonth = date[1];

				this.dateStr = this.searchYear + "年" + this.searchMonth + "月";
				this.reset();
			},
			// 交易类型监听
			bindTradeChange({ detail: { value } }) {
				this.tradeType = Number(this.payType1[value]['id'])
				this.reset();
			},
			reset() {
				this.pageCount = 1;
				this.pageIndex = 1;
				this.getList();
			},
			async getList() {
				if (this.pageIndex > this.pageCount) {
					return
				}
				this.isLoading = true;
				//父级
				const { list, pageCount } = await UserBalanceRecord({
					coinid: this.coinid,
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
					tradetype: this.tradeType==0?"":this.tradeType,
				})
				this.isLoading = false;
				this.pageCount = pageCount;
				if (this.pageIndex <= 1) {
					this.listArr = list;
				} else {
					this.listArr = [...this.listArr, ...list];
				}
				this.pageIndex++;
				uni.stopPullDownRefresh();
			},
		},
		onReachBottom() {
			this.getList();
			console.log("触底了");
		},
	}
</script>

<style lang="scss">
	.wallet-box {
		min-height: 100vh;
		// background: url('../../../static/images/pages/wallet/withdeawbg.png') no-repeat;
		background-size: 750rpx 400rpx;
	} 

	.top-card {
		.balance-box {
			padding: 30rpx;

			.h1 {
				.left {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
				}

				.right {
					text {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						text-decoration: underline;
						text-underline-offset: 6rpx;
						color: #999999;
					}
				}

			}

			.h2 {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999;
			}
		}

		.btn-box {
			background: #f0edff;

			&>view {
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				padding: 20rpx 0;
				flex: 1;
				text-align: center;

				text {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 600;
					color: var(--theme);
				}
			}

			&>view+view {
				&::before {
					content: "";
					display: block;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 1rpx;
					height: 30rpx;
					background: hsla(223, 90%, 54%, .5);
					border-radius: 1rpx;
				}
			}
		}

	}

	.ul {
		overflow: hidden;

		.li {
			padding: 30rpx 0;
			border-top: 1rpx solid #efefef;

			.h1 {
				.left {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				.right {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}

			.h2 {
				padding-top: 15rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #666666;
			}
		}

		.li+.li {}
	}
</style>